<template>
	<view class="custom_coupon">
		<view class="main">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll_Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view v-for="(item, key) of couponList" :style="count === key ? 'border: 2rpx solid #39B19D' : ''"
					class="ticket_box" @click="handSelectd(item, key)" :key="key">
					<view class="left">
						<view>{{ `$${item.money}` }}</view>
						<!-- <view>{{ `限用${item.num}次` }}</view> -->
						<view class="">滿{{item.min}}可用</view>
					</view>
					<view class="right">
						<view>{{ item.title }}</view>
						<view class="expir">{{
							`有效期${formatDate(item.expire_time)}`
						}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		formatDate
	} from '@/utils/formatDate';
	import {
		getUserCoupon
	} from '@/api/user.js'

	export default {
		props: {
			list: {
				type: Array,
			},
		},
		data() {
			return {
				view: {},
				form: {},
				count: -1,
				options: {
					couponName: [{
							id: '1',
							name: '未使用',
						},
						{
							id: '2',
							name: '已預約',
						},
						{
							id: '3',
							name: '已使用',
						},
					],
				},

				rules: {
					couponName: {
						type: 'string',
						required: true,
						message: '優惠券名稱',
						trigger: ['blur'],
					},
					storeCount: {
						type: 'string',
						required: true,
						message: '優惠券面额',
						trigger: ['blur'],
					},
					condition: {
						type: 'number',
						required: true,
						message: '優惠券面額',
						trigger: ['blur'],
					},
					roomType: {
						type: 'string',
						required: true,
						message: '包間類型',
						trigger: ['blur'],
					},
					startDate: {
						type: 'string',
						required: true,
						message: '開始時間',
						trigger: ['blur'],
					},
					endDate: {
						type: 'string',
						required: true,
						message: '結束時間',
						trigger: ['blur'],
					},
				},
				scrollTop: 0,
				selectRange: [],
				couponList:[],
			};
		},
		mounted() {
			// console.log('list', this.list);
			this.getUserCouponFn()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			submit() {
				// console.log(this.checkFormList(),"111111")
				if (this.checkFormList()) {
					// 提交数据
					const {
						title,
						num,
						money,
						min,
						start_time,
						end_time,
						room_type
					} =
					this.form;
					updateCouponSend({
						name: title,
						num,
						money,
						min,
						start_time,
						end_time,
						room_type,
						status: 1,
					}).then(res => {
						// console.log("添加成功")
						uni.showToast({
							title: '添加成功',
							duration: 1000,
						});
					});
				} else {
					uni.showModal({
						title: '系統提示',
						content: '請檢查是否填寫',
					});
				}
			},
			checkFormList() {
				const {
					title,
					num,
					money,
					min,
					start_time,
					end_time,
					room_type
				} =
				this.form;
				return (
					title && num && money && min && start_time && end_time && room_type
				);
			},
			formatDate(data) {
				return formatDate(data);
			},
			handSelectd(data, key) {
				this.count = key;
				this.$emit('slected', data);
			},
			handleClose() {
				this.showStartDate = false;
				this.showEndDate = false;
			},
			upper(e) {
				// console.log(e);
			},
			lower(e) {
				// console.log(e, '已经滚动到底部');
			},
			scroll(e) {
				// console.log(e, '记录滚动相关的数据');
			},
			getUserCouponFn(){
				const {
					user
				} = useStore();
				const room_id = user.ticket.id;
				getUserCoupon({room_id}).then(res=>{
					// console.log(res,'優惠券列表')
					this.couponList = [...res]
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.custom_coupon {
		height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些

		.main {
			padding: 20rpx;

			.scroll_Y {
				width: 100%; // 滚动区域的宽度
				height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些
			}

			.ticket_box {
				position: relative;
				margin-bottom: 20rpx;
				border: 2rpx solid transparent;
				border-radius: 20rpx;
				background-color: $uni-color-white;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 250rpx;
					height: 150rpx;
					text-align: center;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: $uni-color-white;
					mask-image: radial-gradient(circle at 500rpx 8rpx,
							transparent 8rpx,
							$uni-color-green 9rpx),
						radial-gradient(closest-side circle at 50%,
							$uni-color-green 99%,
							transparent 100%);
					mask-size: 100%, 10rpx 20rpx;
					mask-repeat: repeat, repeat-y;
					mask-position: 140rpx 10rpx, 245rpx;
					mask-composite: source-out;
					mask-composite: subtract;
					background-color: $uni-color-green;
				}

				.right {
					flex: 1;
					height: 150rpx;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.expir {
						font-size: 24rpx;
						color: $uni-color-grey-dark;
					}
				}
			}
		}
	}
</style>